<template>
    <div class="body bg pos-rel" :class="{ home: isHome }">
        <div class="w-100 pos-abs" style="z-index: 3">
            <div
                class="head-cover pos-all"
                style="background-color: rgba(0, 0, 0, 0.1)"
            ></div>
            <div class="w head">
                <div class="logo">
                    <img src="@/assets/images/logo.png" alt="" />
                </div>
                <el-menu
                    :default-active="activeIndex"
                    class="head"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#fff"
                    text-color="#333"
                    active-text-color="#409EFF"
                >
                    <el-menu-item
                        v-for="(item, index) in linkList"
                        :key="index"
                        class="li"
                        :index="(index - -1).toString()"
                    >
                        <router-link v-if="item.to" :to="item.to" class="link">
                            {{ item.text }}
                            <span class="bor"></span>
                        </router-link>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="h-100 bg-white head-banner" v-show="isHome">
            <swiper
                class="h-100 swiper-container"
                ref="headSwiper"
                :options="swiperOps"
            >
                <swiper-slide
                    class="w-100 flex ali-cen"
                    v-for="(item, index) in bans"
                    :key="index"
                >
                    <div class="h-100 pos-rel bg-white">
                        <img :src="item.pic" width="100%" />
                        <div class="w pos-all txt-white">
                            <div class="content-box">
                                <h3 class="fs-34">
                                    {{ item.tit }}
                                </h3>
                                <p class="fs-18">
                                    {{ item.info }}
                                </p>
                                <div class="cur-p button fs-16">
                                    了解更多
                                    <span style="font-size: 0">{{
                                        item.url
                                    }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="main w txt-white" v-show="!isHome">
            <div class="pos-abs" style="top: 210px">
                <h2 class="fs-bold" style="font-size: 40px">
                    {{ linkList[Number(activeIndex) - 1].tit }}
                </h2>
                <p style="font-size: 20px; margin-top: 20px">
                    {{ linkList[Number(activeIndex) - 1].subTit }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    let vm = null

    let ban1 = require('../../assets/images/head/ban1.png'),
        ban2 = require('../../assets/images/head/ban2.png')

    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'

    export default {
        props: {},
        data() {
            return {
                isHome: true,
                activeIndex: '1',
                linkList: [
                    {
                        to: '/home',
                        text: '首页',
                    },
                    {
                        to: '/smartEnergy',
                        text: '智慧能源',
                        tit: '智慧能源',
                        subTit: 'INTELLIGENT ENERGY',
                    },
                    {
                        to: '/digitization',
                        text: '数字化',
                        tit: '数字化',
                        subTit: 'DIGITIZING',
                    },
                    {
                        to: '/iot',
                        text: '智能物联',
                        tit: '智能物联',
                        subTit: 'AIoT',
                    },
                    {
                        to: '/service',
                        text: '精益服务',
                        tit: '精益服务',
                        subTit: 'LEAN SERVICE',
                    },
                    {
                        to: '/case',
                        text: '典型案例',
                        tit: '典型案例',
                        subTit: 'TIPICAL CASES',
                    },
                    {
                        to: '/news',
                        text: '新闻中心',
                        tit: '新闻中心',
                        subTit: 'NEWS',
                    },
                    {
                        to: '/company',
                        text: '华中科技 ',
                        tit: '关于华中科技',
                        subTit: 'ABOUT SGCCTD',
                    },
                    {
                        to: '/contact',
                        text: '联系我们',
                        tit: '联系我们',
                        subTit: 'CONTACT',
                    },
                    // {
                    //     to: '/login',
                    //     text: '登录',
                    //     tit: '',
                    //     subTit: '',
                    // },
                    // {
                    //     to: '/user',
                    //     text: '我的',
                    //     tit: '',
                    //     subTit: '',
                    // },
                ],
                keyword: '',
                bans: [
                    {
                        pic: ban1,
                        url: '/company',
                        tit: '引领能源数字化 开启无限可能',
                        info: '深耕行业领域，紧随时代变革',
                    },
                    {
                        pic: ban2,
                        url: '/smartEnergy/energyDetail/202009021809416120008',
                        tit: '重点用能单位能耗在线监测系统( H-ECM V2.0 )',
                        info:
                            '满足重点用能单位多种能源数据的采集监测、汇总、分析以及与各地能耗在线监测省级平台的报送、接入',
                    },
                ],
                swiperOps: {
                    slidesPerView: 1,
                    loop: true,
                    autoplay: { delay: 3000, disableOnInteraction: false },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                        bulletClass: 'my-bullet',
                        bulletActiveClass: 'my-bullet-active',
                    },
                    on: {
                        click: function (swiper, e) {
                            let targetEle = swiper.target
                            if (targetEle.className != 'cur-p button fs-16') {
                                return
                            }
                            let path = targetEle.lastChild.innerText
                            vm.$router.push(path)
                        },
                    },
                },
            }
        },
        methods: {
            handleSelect(key, keyPath) {},
            search() {
                console.log(this.keyword)
            },
            initSwiper() {
                if (this.swiper != null) return
            },
        },
        computed: {
            swiper() {
                return this.$refs.headSwiper.$swiper
            },
        },
        components: {
            swiper,
            swiperSlide,
        },
        watch: {
            $route(to, from) {
                let matched = to.matched[0].path,
                    activeIndex = '1'
                this.isHome = matched == '/home' ? true : false
                activeIndex = this.linkList.findIndex((item) => {
                    return item.to == matched
                })
                activeIndex < 0 ? (activeIndex = 0) : ''
                this.activeIndex = (activeIndex + 1).toString()
            },
        },
        created() {
            vm = this
        },
        mounted() {},
    }
</script>
<style scoped lang="scss">
    .body {
        width: 100%;
        box-shadow: 0px 2px 12px 6px rgba(3, 5, 27, 0.06);
        top: 0;
        z-index: 1;
        height: 460px;
        background-image: url('../../assets/images/head/home-bg2.png');
        &.home {
            height: 592px;
        }
        @media screen and (max-width: 1400px) {
            &.home {
                height: 419px;
            }
        }

        .head {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            .logo {
                width: 144px;
                height: 42px;
                margin: 23px 0 0;
                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
        }

        .head-banner .content-box {
            position: absolute;
            bottom: 180px;
            p {
                margin: 30px 0 70px;
                max-width: 490px;
            }
            .button {
                width: 194px;
                height: 45px;
                line-height: 45px;
                border: 1px solid #fff;
                border-radius: 5px;
                text-align: center;
                bottom: 172px;
            }
        }

        @media screen and (max-width: 1400px) {
            .head-banner .content-box {
                bottom: 140px;
                p {
                    margin: 20px 0 40px;
                    max-width: 490px;
                }
                .button {
                    width: 135px;
                    height: 40px;
                    line-height: 40px;
                }
            }
        }
    }
</style>

<style lang="scss">
    .head.el-menu {
        margin-left: 60px;
        border-color: transparent;
        background-color: transparent !important;
        &.el-menu--horizontal {
            border-bottom: none !important;
        }
        .el-menu-item {
            height: 80px;
            line-height: 80px;
        }
        .el-menu-item.li {
            position: relative;
            color: #ffffff !important;
            margin: 0 15px;
            padding: 0;
            background-color: transparent !important;
            &.el-menu-item.is-active {
                border-bottom-color: #fff !important;
                .link {
                    color: #fff;
                    font-weight: bold;
                }
            }
            .link {
                font-size: 16px;
                display: block;
                color: #ededed;
                width: 100%;
                height: 100%;
                padding: 0 10px;
            }
            .bor {
                position: absolute;
                top: 55%;
                transform: translateY(-50%);
                right: -15px;
                width: 1px;
                height: 20px;
                background-color: #fff;
            }

            &:last-child {
                .bor {
                    display: none;
                }
            }
        }
    }
    .head-banner {
        .el-carousel__container {
            height: 592px;
        }
        .swiper-pagination-bullets {
            bottom: 122px !important;
        }
        .my-bullet {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #ffffff;
            border-radius: 50%;
            margin: 0 12px;
            cursor: pointer;
        }
        .my-bullet-active {
            width: 44px;
            height: 12px;
            background: #ffffff;
            border-radius: 6px;
        }
        @media screen and (max-width: 1400px) {
            .el-carousel__container {
                height: 419px;
            }
        }
    }
</style>